<template>
   <div class="main" @click="$router.push('/detail?id='+data.id)">
       <!-- 一张图片 -->
       <div class="onepictrue" v-if='data.type==1 && data.cover.length>0 && data.cover.length < 3'>
           <div class="textleft">
              <h3>
                  {{data.title}}
              </h3>
              <span class="txt">{{data.user.nickname}}      {{data.comment_length}}跟帖</span>
           </div>
           <img :src="data.cover[0].url" alt="">
       </div>
       <!-- 三张图片 -->
       <div class="threepic" v-if="data.type==1 && data.cover.length >=3">
           <h3>亚马逊雨林为何燃烧？除了新总统“急功近利”的开发，国际资本才是真凶</h3>
           <div class="pic">
              <img :src="data.cover[0].url" alt="">
              <img :src="data.cover[1].url" alt="">
              <img :src="data.cover[2].url" alt="">
           </div>
           <div class="text">
               <span>{{data.user.nickname}}  {{data.comment_length}}跟帖</span>
           </div>
       </div>
       <!-- 视频部分 -->
       <div class="vedio" v-if="data.type==2">
            <h3>{{data.title}}</h3>
            <div class="img">
                <img :src="data.cover[0].url" alt="">
                <span class="iconfont iconshipin"></span>
            </div>
       </div>
   </div>
</template>

<script>
export default {
    props:['data']
}
</script>

<style lang="less" scoped>
.onepictrue{
    padding: 10/360*100vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom:1px solid #cccccc ;
    h3{
        padding: 0;
        margin: 0;
        font-size: 16px;
        color: #333;
        font-weight: normal;
        margin-bottom: 10/360*100vw;
    }
    .txt{
        font-size: 14px;
        color: #888;
    }
    img{
        width: 120/360*100vw;
        height: 75/360*100vw;
    }
}
.threepic{
    padding: 10/360*100vw;
    border-bottom: 1px solid #cccccc;
    h3{
        padding: 0;
        margin: 0;
        font-size: 18px;
        color: #333;
        font-weight: normal;  
    }
    .pic{
        width: 100%;
        display: flex;
        justify-content: space-between;
        padding: 5/360*100vw;
        img{
            width: 33%;
            height: 74/360*100vw;
        }
    }
    .text{
        margin-top: 10/360*100vw;
        span{
            color: #999;
            font-size: 14px;
        }
    }
}
.vedio{
    padding: 10/360*100vw;
    h3{
        font-size: 18px;
        font-weight: normal;
        padding: 0;
        margin: 0;       
    }
    .img {
       position: relative;
       width: 340/360*100vw;
       height: 170/360*100vw;
       img{
           width: 100%;
           height: 100%;
       }
       .iconshipin{
           position: absolute;
           top: 50%;
           left: 50%;
           line-height: 54/360*100vw;
           font-size: 50/360*100vw;
           transform: translateX(-27/360*100vw) translateY(-27/360*100vw);
           background-color: rgba(225, 225, 225, 0.6);
           color: #ffffff;
           border-radius: 50% ;
       }      
    }
    
}

</style>